<template>
  <div class="wrap">
    <div class="navigator" @click="showMask = true">
      我的收益
      <img src="@/assets/question.png" alt="" class="question" />
    </div>
    <div class="rentWrap">
      <p class="line1">累计获得</p>
      <p class="line2"><em>¥</em>{{ shopInfo.balancePrice }}</p>
      <p class="line3">温馨提示：到账收益会自动充入余额</p>
      <p class="line4">
        已到账：{{ shopInfo.balancePrice }}元 未到账：{{ shopInfo.notToBalance }}元
      </p>
    </div>
    <div class="title">收益信息</div>
    <div class="productionList" v-for="(item,index) in resCashRecordList" :key="index">
      <div class="proTitle">
        <div class="proLeft">{{item.payTime}}</div>
        <div class="proRight">{{item.status==0?'未到账':item.status==1?'已到账':item.status==2?'已退款':''}}</div>
      </div>
      <div class="productionItem">
        <div class="proIntroWrap">
          <div class="proIntroLeft">
            <img :src="$imgUrl+item.listImgUrl" alt="" class="proPoster" />
          </div>
          <div class="proIntroRight">
            <div class="proIntro">
              {{item.goodsName}}
            </div>
            <div class="workTime">
              <div class="timeLeft">{{item.specsName}} ×{{item.payNum}}</div>
              <div class="saleRight"><em class="moneyLogo">￥</em>{{item.totalPayPrice}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="totalCount">
        应付¥{{item.shouldPrice}}优惠¥{{item.disPrice}}
        <em class="realPay">实付</em>
        <em class="realMoney">￥{{item.totalPayPrice}}</em>
      </div>
    </div>
    <!-- 遮罩层-收益到账说明 -->
    <div class="maskWrap" v-if="showMask">
      <div class="maskBg" @click="showMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">收益到账说明</div>
        <div class="maskExpalin" v-html="resExplainApply.content"></div>
        <div class="maskBack" @click="showMask = false">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiAppUserInfo, apiBalance, apiEarningRecordList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showMask: false,
      shopInfo: "", //店铺信息
      resExplainApply: "", //余额提现说明
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
      resCashRecordList: [], //押金缴纳记录列表
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getBalance();
    this.getAppUserInfo();

    this.getCashRecordList();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return;
        }
        this.getCashRecordList();
      }
    },
    //查询收益列表:
    getCashRecordList() {
      var page = (this.reqPageNum += 1);
      console.log("page", page);
      apiEarningRecordList({
        pageNum: page,
        pageSize: this.reqpageSize,
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        this.resCashRecordList = [...this.resCashRecordList, ...dataRes];
        console.log("resCashRecordList-收益列表", this.resCashRecordList);
      });
    },
    //收益说明：
    getBalance() {
      apiBalance({}).then((res) => {
        this.resExplainApply = res.data;
      });
    },
    //用户信息获取店铺押金、余额等信息
    getAppUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.shopInfo = res.data;
      });
    },
    //支付密码管理：
    jumpPayPassWord() {
      this.$router.replace({
        path: "/pages/bSetPassword",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.navigator {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
}
.question {
  width: 15px;
  padding-top: 5px;
}
.rentWrap {
  width: 95%;
  margin: 0 auto;
  height: 147px;
  font-size: 12px;
  background-color: #ffffff;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  color: #000000;
  border-radius: 20px;
  margin-top: 10px;
}
.title {
  margin-left: 2.5%;
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin: 10px 0px 10px 2.5%;
}
.line1 {
  text-align: center;
  padding-top: 25px;
}
.line2 {
  font-size: 24px;
  text-align: center;
  margin-top: 10px;
}
.line2 em {
  font-size: 12px;
}
.line3 {
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
  margin-top: 10px;
}
.line4 {
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  color: #4d63ff;
  margin-top: 10px;
}
.productionList {
  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.productionItem {
  margin-bottom: 40px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.proLeft {
}
.proRight {
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
  width: 32%;
  height: 75px;
}
.proPoster {
  width: 100%;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
  padding-bottom: 10px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 30vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
